<template>
  <a-layout class="app-container">
    <!-- 左侧导航栏 -->
    <a-layout-sider 
      v-model:collapsed="collapsed" 
      collapsible
      :width="220"
      breakpoint="lg"
      class="app-sider"
    >
      <div class="logo">
        <h1 v-if="!collapsed">长九工具平台</h1>
        <h1 v-else>AS</h1>
      </div>
      <AppMenu :collapsed="collapsed" />
    </a-layout-sider>
    
    <!-- 右侧内容区域 -->
    <a-layout>
      <AppHeader />
      <a-layout-content class="app-content">
        <router-view />
      </a-layout-content>
      <AppFooter />
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue'
import AppHeader from '@/components/Layout/Header.vue'
import AppFooter from '@/components/Layout/Footer.vue'
import AppMenu from '@/components/Layout/Menu.vue'

const collapsed = ref(false)
</script>

<style scoped>
.app-container {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
}

.app-sider {
  z-index: 10;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

.app-sider .logo {
  height: 64px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #002140;
  color: white;
  overflow: hidden;
}

.app-sider .logo h1 {
  color: white;
  font-size: 18px;
  margin: 0 0 0 10px;
  white-space: nowrap;
}

.app-content {
  margin: 16px;
  padding: 24px;
  background: #fff;
  height: calc(100vh - 64px - 70px - 32px);
  overflow: auto;
}
</style>